<template>
  <div
    class="border"
    style="width: 200px; height: 240px; font-size: 16px; cursor:pointer;"
    @click="toProduceDetail()"
  >
    <!-- <div style="width: 200px; height: 200px; border: 1px solid #cccccc"></div> -->

    <div style="width: 198px; height: 190px; display: flex;">
      <el-image
        style="width: 180px; height: 180px; border: 1px solid #cccccc; margin:auto;"
        :src="produceIcon"
        fit="contain"
      ></el-image>
    </div>
    <!-- style="align-self:center;" -->
    <div style="width: 198px; height: 50px;">
      <span>&nbsp;&nbsp;{{produce.produceName}}</span>
      <br />
      <span style="font-weight: bold; color: #ff0000;">&nbsp;&nbsp;{{produce.producePrice}}</span>￥
    </div>
  </div>
</template>

<script>
export default {
  name: "ProduceSample",
  data() {
    return {
      produceIcon: "",
      produce: {},
    };
  },
  methods: {
    init(produce) {
      this.produce = produce;
      this.produceIcon = produce.produceIcon;
    },
    toProduceDetail() {
      // console.log(this.produce.produceId);
      window.open(process.env.PRODUCE_URL + this.produce.produceId);
    },
  },
  mounted() {
    // console.log(this);
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.border {
  border: 1px solid #cccccc;
}
.border:hover {
  border: 1px solid #ff0000;
}
</style>
